<require>hotkey evalCss $ each keyCode</require>

<style>
    /* Modified from https://github.com/jaywcjlove/hotkeys */
    body {
        background: #000;
    }

    .keyboard {
        height: 394px;
        border-radius: 10px;
        border: 1px solid #c9c9c9;
        background: #f2f2f2;
        box-shadow: 2px 0px 2px #e2e2e2 inset, -2px 2px 3px #e2e2e2 inset,
            1px -0px 0px #c1c1c1 inset, 0px -2px 3px #c1c1c1 inset;
        user-select: none;
        position: relative;
        top: 20px;
        width: 995px;
        margin: 0 auto;
    }

    ul {
        width: 992px;
        margin-top: 9px;
        padding-left: 11px;
        position: relative;
        float: left;
        list-style: none;
    }

    li {
        width: 62px;
        height: 62px;
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        background: #151515;
        color: rgb(200, 200, 200);
        text-align: center;
        line-height: 62px;
        font-size: 12px;
        border-radius: 8px;
        border: 1px solid #3a3a3a;
        box-shadow: 1px 0px 0px rgb(0, 0, 0), 0px 1px 0px rgb(0, 0, 0),
            -1px 0px 0px rgb(0, 0, 0), 0px -1px 0px rgb(0, 0, 0);
        transition: all 0.2s;
        user-select: none;
        cursor: pointer;
        position: relative;
    }

    li:active,
    li.pressed {
        color: #fff;
        background-color: #d97c98;
        border: 1px solid #fff;
    }

    li:nth-child(1) {
        width: 99px;
        height: 28px;
        line-height: 28px;
        text-indent: 1em;
        text-align: left;
    }

    li:nth-child(2),
    li:nth-child(3),
    li:nth-child(4),
    li:nth-child(5),
    li:nth-child(6),
    li:nth-child(7),
    li:nth-child(8),
    li:nth-child(9),
    li:nth-child(10),
    li:nth-child(11),
    li:nth-child(12),
    li:nth-child(13),
    li:nth-child(14) {
        width: 60px;
        height: 28px;
        line-height: 28px;
    }

    li:nth-child(15),
    li:nth-child(16),
    li:nth-child(17),
    li:nth-child(18),
    li:nth-child(19),
    li:nth-child(20),
    li:nth-child(21),
    li:nth-child(22),
    li:nth-child(23),
    li:nth-child(24),
    li:nth-child(25),
    li:nth-child(26),
    li:nth-child(27),
    li:nth-child(40),
    li:nth-child(41),
    li:nth-child(42),
    li:nth-child(53),
    li:nth-child(54),
    li:nth-child(64),
    li:nth-child(65),
    li:nth-child(66) {
        padding: 7px 0;
        height: 48px;
    }

    li:nth-child(15) span,
    li:nth-child(16) span,
    li:nth-child(17) span,
    li:nth-child(18) span,
    li:nth-child(19) span,
    li:nth-child(20) span,
    li:nth-child(21) span,
    li:nth-child(22) span,
    li:nth-child(23) span,
    li:nth-child(24) span,
    li:nth-child(25) span,
    li:nth-child(26) span,
    li:nth-child(27) span,
    li:nth-child(40) span,
    li:nth-child(41) span,
    li:nth-child(42) span,
    li:nth-child(53) span,
    li:nth-child(54) span,
    li:nth-child(64) span,
    li:nth-child(65) span,
    li:nth-child(66) span {
        line-height: 23px;
        height: 23px;
        width: 100%;
        float: left;
        font-size: 14px;
    }
    li:nth-child(28) span,
    li:nth-child(55) span,
    li:nth-child(67) span {
        line-height: 14px;
        margin-top: 43px;
        float: right;
        margin-right: 8px;
    }

    li:nth-child(30),
    li:nth-child(31),
    li:nth-child(32),
    li:nth-child(33),
    li:nth-child(34),
    li:nth-child(35),
    li:nth-child(36),
    li:nth-child(37),
    li:nth-child(38),
    li:nth-child(39),
    li:nth-child(44),
    li:nth-child(45),
    li:nth-child(46),
    li:nth-child(47),
    li:nth-child(48),
    li:nth-child(49),
    li:nth-child(50),
    li:nth-child(51),
    li:nth-child(52),
    li:nth-child(57),
    li:nth-child(58),
    li:nth-child(59),
    li:nth-child(60),
    li:nth-child(61),
    li:nth-child(62),
    li:nth-child(63) {
        font-size: 18px;
        line-height: 64px;
    }

    li:nth-child(29) span,
    li:nth-child(43) span,
    li:nth-child(56) span,
    li:nth-child(68) span,
    li:nth-child(69) span,
    li:nth-child(70) span,
    li:nth-child(71) span,
    li:nth-child(73) span,
    li:nth-child(74) span {
        line-height: 14px;
        margin-top: 43px;
        text-indent: 5px;
        float: left;
    }

    li:nth-child(28),
    li:nth-child(29) {
        width: 73px;
    }
    li:nth-child(43),
    li:nth-child(55) {
        width: 102px;
    }

    li:nth-child(43) span:first-child {
        position: absolute;
        top: -36px;
        left: 5px;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 3px;
    }

    li:nth-child(43):active span:first-child {
        background: #52f800;
    }

    li:nth-child(55) span:first-child,
    li:nth-child(70) span:first-child {
        position: absolute;
        right: 0px;
        top: -37px;
        font-size: 12px;
        line-height: 12px;
    }
    li:nth-child(70) span:first-child {
        left: 0px;
        text-align: left;
    }
    li:nth-child(74) span:first-child {
        position: absolute;
        left: 0;
        top: -37px;
        font-size: 12px;
        line-height: 12px;
    }
    li:nth-child(56) {
        width: 136px;
    }
    li:nth-child(67) {
        width: 137px;
    }
    li:nth-child(71),
    li:nth-child(73) {
        width: 70px;
    }
    li:nth-child(72) {
        width: 333px;
    }

    li:nth-child(76),
    li:nth-child(78) {
        height: 29px;
        line-height: 29px;
    }
    li:nth-child(76) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    li:nth-child(78) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        position: absolute;
        bottom: 0;
        right: 84px;
    }
</style>

<template id="bodyTpl">
    <div class="keyboard">
        <ul>
            <li data-key="27">
                <span>esc</span>
            </li>
            <li data-key="112">
                <span>F1</span>
            </li>
            <li data-key="113">
                <span>F2</span>
            </li>
            <li data-key="114">
                <span>F3</span>
            </li>
            <li data-key="115">
                <span>F4</span>
            </li>
            <li data-key="116">
                <span>F5</span>
            </li>
            <li data-key="117">
                <span>F6</span>
            </li>
            <li data-key="118">
                <span>F7</span>
            </li>
            <li data-key="119">
                <span>F8</span>
            </li>
            <li data-key="120">
                <span>F9</span>
            </li>
            <li data-key="121">
                <span>F10</span>
            </li>
            <li data-key="122">
                <span>F11</span>
            </li>
            <li data-key="123">
                <span>F12</span>
            </li>
            <li data-key="-1">
                <span>〇</span>
            </li>
            <li data-key="192">
                <span>~</span>
                <span>`</span>
            </li>
            <li data-key="49">
                <span>!</span>
                <span>1</span>
            </li>
            <li data-key="50">
                <span>@</span>
                <span>2</span>
            </li>
            <li data-key="51">
                <span>#</span>
                <span>3</span>
            </li>
            <li data-key="52">
                <span>$</span>
                <span>4</span>
            </li>
            <li data-key="53">
                <span>%</span>
                <span>5</span>
            </li>
            <li data-key="54">
                <span>^</span>
                <span>6</span>
            </li>
            <li data-key="55">
                <span>&amp;</span>
                <span>7</span>
            </li>
            <li data-key="56">
                <span>*</span>
                <span>8</span>
            </li>
            <li data-key="57">
                <span>(</span>
                <span>9</span>
            </li>
            <li data-key="48">
                <span>)</span>
                <span>0</span>
            </li>
            <li data-key="189">
                <span>＿</span>
                <span>-</span>
            </li>
            <li data-key="187">
                <span>＋</span>
                <span>: </span>
            </li>
            <li data-key="8">
                <span>delete</span>
            </li>
            <li data-key="9">
                <span>tab</span>
            </li>
            <li data-key="81">
                <span>Q</span>
            </li>
            <li data-key="87">
                <span>W</span>
            </li>
            <li data-key="69">
                <span>E</span>
            </li>
            <li data-key="82">
                <span>R</span>
            </li>
            <li data-key="84">
                <span>T</span>
            </li>
            <li data-key="89">
                <span>Y</span>
            </li>
            <li data-key="85">
                <span>U</span>
            </li>
            <li data-key="73">
                <span>I</span>
            </li>
            <li data-key="79">
                <span>O</span>
            </li>
            <li data-key="80">
                <span>P</span>
            </li>
            <li data-key="219">
                <span>{</span>
                <span>[</span>
            </li>
            <li data-key="221">
                <span>}</span>
                <span>]</span>
            </li>
            <li data-key="220">
                <span>|</span>
                <span>\</span>
            </li>
            <li data-key="20">
                <span></span>
                <span>CapsLock</span>
            </li>
            <li data-key="65">
                <span>A</span>
            </li>
            <li data-key="83">
                <span>S</span>
            </li>
            <li data-key="68">
                <span>D</span>
            </li>
            <li data-key="70">
                <span>F</span>
            </li>
            <li data-key="71">
                <span>G</span>
            </li>
            <li data-key="72">
                <span>H</span>
            </li>
            <li data-key="74">
                <span>J</span>
            </li>
            <li data-key="75">
                <span>K</span>
            </li>
            <li data-key="76">
                <span>L</span>
            </li>
            <li data-key="186">
                <span>:</span>
                <span>;</span>
            </li>
            <li data-key="222">
                <span>"</span>
                <span>'</span>
            </li>
            <li data-key="13">
                <span>enter</span>
                <span>return</span>
            </li>
            <li data-key="16">
                <span>⇧</span>
            </li>
            <li data-key="90">
                <span>Z</span>
            </li>
            <li data-key="88">
                <span>X</span>
            </li>
            <li data-key="67">
                <span>C</span>
            </li>
            <li data-key="86">
                <span>V</span>
            </li>
            <li data-key="66">
                <span>B</span>
            </li>
            <li data-key="78">
                <span>N</span>
            </li>
            <li data-key="77">
                <span>M</span>
            </li>
            <li data-key="188">
                <span>&lt;</span>
                <span>,</span>
            </li>
            <li data-key="190">
                <span>&gt;</span>
                <span>.</span>
            </li>
            <li data-key="191">
                <span>?</span>
                <span>/</span>
            </li>
            <li data-key="16">
                <span>⇧</span>
            </li>
            <li data-key="-1">
                <span>fn</span>
            </li>
            <li data-key="17">
                <span>control</span>
            </li>
            <li data-key="18">
                <span>alt</span>
                <span>option</span>
            </li>
            <li data-key="91">
                <span>command</span>
            </li>
            <li data-key="32">
                <span></span>
            </li>
            <li data-key="93">
                <span>command</span>
            </li>
            <li data-key="18">
                <span>alt</span>
                <span>option</span>
            </li>
            <li data-key="37">
                <span>◀</span>
            </li>
            <li data-key="38">
                <span>▲</span>
            </li>
            <li data-key="39">
                <span>▶</span>
            </li>
            <li data-key="40">
                <span>▼</span>
            </li>
        </ul>
    </div>
</template>

<script>
    evalCss(style);
    $('body').html(bodyTpl);

    var $li = $('li'),
        keyCodes = [];

    $li.each(function() {
        keyCodes.push(+$(this).data('key'));
    });

    each(keyCodes, function(key) {
        key = keyCode(key);
        if (!key) return;
        hotkey.on(key, function(e) {
            e.preventDefault();
            $('ul')
                .find('[data-key="' + e.keyCode + '"]')
                .toggleClass('pressed');
        });
    });
</script>
